import { Image, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { useEffect, useState } from 'react';
import { AtFloatLayout } from 'taro-ui';
import { connect } from 'react-redux';
import pClose from '@/images/common/close1.png';
import pRightGray from '@/images/common/rightGray.svg';
import pYouji from '@/mainSubPack/images/goodsDetail/youji.png';
import pZiti from '@/mainSubPack/images/goodsDetail/ziti.png';
import 'taro-ui/dist/style/components/float-layout.scss';
import './index.scss';

const DistributeInfo = ({ isOpened, handleClose, distributionWay, area, storeId }) => {
  const [status, setStatus] = useState({
    youji: false,
    ziti: false,
  });

  useEffect(() => {
    let youji = false;
    let ziti = false;
    for (let i = 0; i < distributionWay.length; i++) {
      if (distributionWay[i] == '1') {
        youji = true;
      }
      if (distributionWay[i] == '3') {
        ziti = true;
      }
    }
    setStatus({ youji, ziti });
  }, [distributionWay]);

  const goZitiListPage = () => {
    Taro.navigateTo({ url: '/mainSubPack/selfTakePoint/index?storeId=' + storeId });
  };

  return (
    <View catchMove>
      <AtFloatLayout
        isOpened={isOpened}
        scrollY
        onClose={() => {
          handleClose();
        }}
        className="distributeInfo"
      >
        <View className="distributeContent">
          <View className="ncenter header">
            配送方式
            <Image
              className="closeIcon"
              src={pClose}
              onClick={() => {
                handleClose();
              }}
            />
          </View>
          <View className="headerDis"></View>
          {status.youji && (
            <>
              <View className="labelLine mt32 flex-row--center">
                <Image className="labelImg" src={pYouji} />
                <Text className="label txt24">支持直邮到家</Text>
              </View>
              <View className="item txt24 gray mt12">{area}</View>
            </>
          )}
          {status.ziti && (
            <>
              <View className="labelLine mt32 flex-row-spaceBetween-center">
                <View className="flex-row--center">
                  <Image className="labelImg" src={pZiti} />
                  <Text className="label txt24">支持到店自提</Text>
                </View>
                <View className="flex-row--center" onClick={goZitiListPage}>
                  <Text className="label txt24 gray">查看到店自提</Text>
                  <Image className="nextImg" src={pRightGray} />
                </View>
              </View>
            </>
          )}
          <View className={Taro.$bottomHight ? 'lineEndH' : 'lineEnd'}></View>
          <View className="bottom">
            <View
              className="ncenter btn customePageBackgroundStyle"
              onClick={() => {
                handleClose();
              }}
            >
              知道了
            </View>
            <View className={Taro.$bottomHight ? 'bottomH' : 'bottom0'}></View>
          </View>
        </View>
      </AtFloatLayout>
    </View>
  );
};

export default connect(() => {})(DistributeInfo);
